<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- ! 绘制头部区域 -->
        <tree-tools :tree-data="company" @openDialog="openDialog" :is-root="true" />
        <!-- ! 树组件区域 -->
        <!-- data属性是树组件的数据 -->
        <!-- props是展示规则属性： 值是一个对象  -->
        <!-- { label:'文字显示的字段默认为label',children:'子级存在的字段，默认为children' } -->
        <!-- 4. 渲染 -->
        <el-tree :data="data" :props="{ label:'name',children:'children' }">
          <!-- ! 再次复用头部组件 -->
          <tree-tools slot-scope="{ data }" @editDialog="editDialog" @openDialog="openDialog" :tree-data="data" @updateList="initData" />
        </el-tree>
      </el-card>
    </div>

    <!-- ! 新增和修改的弹框 -->
    <add-dept ref="addDept" @updateList="initData" />
  </div>
</template>
<script>
import { getDepartmentListApi } from '@/api/department';
import TreeTools from './components/tree-tools.vue'
import addDept from './components/add-dept.vue';
import { tranListToTreeData } from '@/utils'
export default {
  name: 'Departments',
  components: {
    TreeTools, addDept
  },
  data() {
    return {
      company: { name: '传智教育', manager: '负责人', id: '' },
      // 1. 定义变量，存储数据
      data: [],
    }
  },
  created() {
    // 3. 生命周期调用
    this.initData()
  },
  methods: {
    // 2. 获取数据
    async initData() {
      // 2.1 发生请求
      let { companyName, depts } = await getDepartmentListApi()
      // 2.2 赋值数据
      this.company.name = companyName
      this.data = tranListToTreeData(depts, '')
    },
    // 打开弹框事件
    openDialog(val) {
      console.log("我们要给id为" + val + "的部门新增子部门");
      // 通过ref来获取到组件实例对象，直接修改里面的数据
      this.$refs.addDept.dialogShow = true
      this.$refs.addDept.formData.pid = val
    },
    // 打开弹框事件
    editDialog(val) {
      console.log("我要修改ID为" + val + "的数据");
      this.$refs.addDept.getFormDataInfo(val)
    }
  },
}
</script>
<style scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>